<template>
  <el-row
    class="index-container"
    type="flex"
    justify="center"
  >
    <el-col :span="20">
      <v-carousel style="margin-top: 20px" />
      <div class="course-list">课程列表</div>
      <v-course-list
        :course-list="courseList"
        style="margin-top: 20px"
      />
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size.sync="searchParams.pageSize"
          :current-page.sync="searchParams.current"
          @size-change="getList"
          @current-change="getList"
        />
      </div>

      <div
        class="vr-icon"
        @click="isPopupShow=!isPopupShow"
      >

        <img
          class="vr-icon"
          src="../components/zhubo.jpg"
          alt=""
        >
      </div>

      <transition name="scale">
        <dialog
          v-if="isPopupShow"
        >
          <div class="result-container">
            <p
              v-for="(item,index) in AQList"
              :key="index"
              :class="item.type==='question'?'question':'answer'"
            >-{{ item.data }}</p>
          </div>
          <div class="input-container">
            <input
              v-model="question"
              placeholder="请输入您的问题"
              type="text"
            >
            <button
              class="button"
              @click="sendQuestion2Server"
            >发送完成{{ AQList[AQList.length-1]?.finished }}
            </button>
          </div>

        </dialog>

      </transition>
    </el-col>
  </el-row>
</template>

<script type="module">

import { ask } from '../api/gpt'
import { mapGetters } from 'vuex'
import stream from 'stream'

export default {
  name: 'Index',
  components: {
    'v-carousel': () => import('@/components/home/carousel'),
    'v-course-list': () => import('@/components/common/course_list')
  },
  data() {
    return {
      bigModel: null,
      question: '秦始皇儿子是谁',
      searchParams: {
        current: 1,
        pageSize: 12
      },
      isScale: false,
      total: 0,
      courseList: [],
      isPopupShow: false,
      // 答案问题列表
      AQList: [],
      answer: '',
      // 每一次请求或者返回的数据,用于在AQList中展示
      aq: {}

    }
  },
  computed: {
    ...mapGetters(['vrResult'])
  },
  created() {
    this.getList()
  },
  methods: {
    async sendQuestion2Server() {
      // // 返回的数据
      // const res = 'result'
      this.aq = { type: 'question', data: this.question, finished: true }
      this.AQList.push(this.aq)
      console.log('首次答案直接为finished:', this.aq.finished, this.AQList.length)

      const response = await fetch(`/api/app/model/ask?question=${this.question}`)

      const reader = response.body.getReader()
      const textDecoder = new TextDecoder()
      // 输入answer
      this.aq = { type: 'answer', data: '', finished: false }
      console.log('发送请求后finished:', this.aq.finished)
      this.AQList.push(this.aq)
      console.log('首先添加空的数据', this.aq.finished)
      while (!this.aq.finished) {
        const { done, value } = await reader.read()
        if (done) {
          console.log('Stream ended')
          this.aq.finished = false
          break
        }
        this.aq.finished = done
        console.log('读取数据', this.aq.finished)

        const chunkText = textDecoder.decode(value)
        this.AQList[this.AQList.length - 1].data += chunkText
        // const answer = (await ask(this.question)).data
        //
      }

      // console.log('Received chunk:', this.AQList)
      this.$store.commit('vr/SET_RESULT', this.AQList)
    },
    getList() {
      // getCourses(this.searchParams).then(resp => {
      //   this.courseList = resp.data.list
      //   this.total = resp.data.total
      // })
    }

  }
}
</script>

<style scoped
       lang="scss">
.index-container {
  position: relative;

  .course-list {
    margin-top: 30px;
    font-size: 24px;
    padding-left: 10px;
    border-left: #409eff solid 5px;

  }

  .vr-icon {
    position: fixed;
    bottom: 20%;
    right: 10%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  dialog {
    top: 10%;
    width: 50%;
    height: 80%;
    border-radius: 20px;
    border: 4px solid skyblue;
    display: flex;
    flex-direction: column;

    .result-container {
      width: 100%;
      height: 80%;
      overflow-y: auto;

      border: 1px solid blue;

      .question {
        color: orange;
      }

      .answer {
        color: darkblue;
      }
    }

    .input-container {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 50%;
      display: flex;
      background: white;
      border-radius: 1rem;
      background: linear-gradient(45deg, #c5c5c5 0%, #ffffff 100%);
      box-shadow: 20px 20px 20px #d8d8d8, -10px -10px 20px #f8f8f8;
      padding: 0.3rem;
      gap: 0.3rem;

      input {
        border-radius: 0.8rem 0 0 0.8rem;
        background: #e8e8e8;
        box-shadow: inset 13px 13px 10px #dcdcdc,
        inset -13px -13px 10px #f4f4f4;
        width: 100%;
        flex-basis: 75%;
        padding: 1rem;
        border: none;
        border-left: 2px solid #4998FF;
        color: #5e5e5e;
        transition: all 0.2s ease-in-out;

        &:focus {
          border-left: 2px solid #4998FF;
          outline: none;
          box-shadow: inset 13px 13px 10px #BFF0FA, inset -13px -13px 10px #f4f4f4;
        }
      }

      button {
        flex-basis: 25%;
        /*padding: 1rem;*/
        background: linear-gradient(135deg, #BFF0FA 0%, #4998FF 100%);
        font-weight: 900;
        letter-spacing: 0.3rem;
        text-transform: uppercase;
        color: white;
        border: none;
        width: 100%;
        border-radius: 0 1rem 1rem 0;
        transition: all 0.2s ease-in-out;

        &:hover {
          background: linear-gradient(135deg, #BFF0FA 0%, #4998ffc4 100%);
        }
      }

      @media (max-width: 500px) {
        .input-container {
          flex-direction: column;
        }

        .input-container input {
          border-radius: 0.8rem;
        }

        .input-container button {
          padding: 1rem;
          border-radius: 0.8rem;
        }
      }
    }
  }
}

.scale-enter, .scale-leave-to {
  transform: scale(0); /* 初始状态为缩小为0 */
}

.scale-enter-active, .scale-leave-active {
  transition: all 1s ease; /* 控制放大过程的持续时间和缓动函数 */
}

.scale-enter-to, .scale-leave-from {
  transform: scale(1); /* 最终状态为放大为1 */
}
</style>
